<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频网站首页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
  <!-- Fallback CDN -->
  <link href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Fallback CDN -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet">
  <!-- Fallback CDN -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3498db;
      --dark-bg: #343a40;
      --light-bg: #f8f9fa;
      --secondary-color: #2ecc71;
      --text-color: #333333;
      --accent-color: #e74c3c;
    }
    body {
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      color: var(--text-color);
      line-height: 1.6;
      background-color: var(--light-bg);
    }
    .section-container {
      margin-bottom: 2rem;
    }
    .card {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    .btn-custom {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: white;
      border-radius: 4px;
      padding: 8px 16px;
      transition: all 0.3s ease;
    }
    .btn-custom:hover {
      background-color: var(--secondary-color);
      border-color: var(--secondary-color);
      transform: translateY(-2px);
    }
    /*顶部导航栏*/
    /*英雄区域*/
    /*精选推荐*/
    /*热门分类*/
    /*热门榜单*/
    /*页脚*/

    /* 组件样式: 顶部导航栏 */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --accent-color: #e74c3c;
      --dark-color: #2c3e50;
      --light-color: #ecf0f1;
    }

    .section-dingbudaohanglan {
      background-color: var(--dark-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      padding: 0.5rem 1rem;
    }

    .section-dingbudaohanglan .navbar-brand {
      font-size: 1.5rem;
      color: var(--light-color);
      transition: transform 0.3s ease;
    }

    .section-dingbudaohanglan .navbar-brand:hover {
      transform: scale(1.05);
      color: var(--light-color);
    }

    .section-dingbudaohanglan .navbar-brand i {
      color: var(--primary-color);
      font-size: 1.8rem;
    }

    .section-dingbudaohanglan .nav-link {
      color: var(--light-color);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      margin: 0 0.25rem;
      transition: all 0.2s ease;
    }

    .section-dingbudaohanglan .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--light-color);
    }

    .section-dingbudaohanglan .nav-link.active {
      background-color: var(--primary-color);
      color: white;
    }

    .section-dingbudaohanglan .search-form .input-group {
      border-radius: 50px;
      overflow: hidden;
    }

    .section-dingbudaohanglan .search-form input {
      background-color: rgba(255, 255, 255, 0.1);
      border: none;
      color: var(--light-color);
      min-width: 250px;
    }

    .section-dingbudaohanglan .search-form input::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .section-dingbudaohanglan .search-form input:focus {
      background-color: rgba(255, 255, 255, 0.2);
      color: var(--light-color);
      box-shadow: none;
    }

    .section-dingbudaohanglan .search-form button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      transition: all 0.2s ease;
    }

    .section-dingbudaohanglan .search-form button:hover {
      background-color: #2980b9;
    }

    .section-dingbudaohanglan .user-actions .btn {
      border-radius: 50px;
      padding: 0.5rem 1rem;
    }

    .section-dingbudaohanglan .dropdown-menu {
      background-color: var(--dark-color);
      border: none;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .section-dingbudaohanglan .dropdown-item {
      color: var(--light-color);
      transition: all 0.2s ease;
    }

    .section-dingbudaohanglan .dropdown-item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--light-color);
    }

    .section-dingbudaohanglan .dropdown-divider {
      border-color: rgba(255, 255, 255, 0.1);
    }

    @media (max-width: 992px) {
      .section-dingbudaohanglan .search-form {
        margin: 1rem 0;
      }

      .section-dingbudaohanglan .user-actions {
        margin-top: 1rem;
        justify-content: flex-start;
      }

      .section-dingbudaohanglan .nav-link {
        margin: 0.25rem 0;
      }
    }

  </style>
</head>
<body>
<!-- SECTION: 顶部导航栏 -->
<!-- 组件HTML结构 -->
<nav class="section-dingbudaohanglan navbar navbar-expand-lg navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand d-flex align-items-center" href="#">
      <i class="fas fa-play-circle me-2"></i>
      <span class="fw-bold">VideoHub</span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#" data-link="home">
            <i class="fas fa-home me-1"></i> 首页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-link="categories">
            <i class="fas fa-list me-1"></i> 分类
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-link="trending">
            <i class="fas fa-fire me-1"></i> 热门
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-link="subscriptions">
            <i class="fas fa-heart me-1"></i> 订阅
          </a>
        </li>
      </ul>
      <form class="d-flex search-form">
        <div class="input-group">
          <input class="form-control" type="search" placeholder="搜索视频..." aria-label="Search">
          <button class="btn" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </form>
      <div class="d-flex ms-3 user-actions">
        <a href="#" class="btn btn-outline-light me-2" data-action="upload">
          <i class="fas fa-upload me-1"></i> 上传
        </a>
        <div class="dropdown">
          <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-user-circle me-1"></i> 用户
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>退出</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>
<!-- /SECTION: 顶部导航栏 -->

<!-- SECTION: 英雄区域 -->
<div class="container-fluid bg-primary text-white py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="display-4 fw-bold">发现精彩视频</h1>
        <p class="lead">海量高清视频，随时随地观看</p>
        <button class="btn btn-light btn-lg">立即观看</button>
      </div>
      <div class="col-md-6">
        <!-- 这里放置视频播放器或宣传图 -->
        <div class="ratio ratio-16x9 bg-dark rounded"></div>
      </div>
    </div>
  </div>
</div>
<!-- /SECTION: 英雄区域 -->

<!-- SECTION: 精选推荐 -->
<div class="container my-5">
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="fw-bold">精选推荐</h2>
    </div>
  </div>
  <div class="row g-4">
    <div class="col-md-6 col-lg-3">
      <div class="card h-100">
        <div class="ratio ratio-16x9 bg-secondary"></div>
        <div class="card-body">
          <h5 class="card-title">视频标题1</h5>
          <p class="card-text text-muted">视频描述内容...</p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card h-100">
        <div class="ratio ratio-16x9 bg-secondary"></div>
        <div class="card-body">
          <h5 class="card-title">视频标题2</h5>
          <p class="card-text text-muted">视频描述内容...</p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card h-100">
        <div class="ratio ratio-16x9 bg-secondary"></div>
        <div class="card-body">
          <h5 class="card-title">视频标题3</h5>
          <p class="card-text text-muted">视频描述内容...</p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="card h-100">
        <div class="ratio ratio-16x9 bg-secondary"></div>
        <div class="card-body">
          <h5 class="card-title">视频标题4</h5>
          <p class="card-text text-muted">视频描述内容...</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /SECTION: 精选推荐 -->

<!-- SECTION: 热门分类 -->
<div class="container my-5">
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="fw-bold">热门分类</h2>
    </div>
  </div>
  <div class="row g-3">
    <div class="col-6 col-md-3">
      <div class="card text-center p-3">
        <i class="bi bi-film fs-1 mb-2"></i>
        <h5>电影</h5>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center p-3">
        <i class="bi bi-tv fs-1 mb-2"></i>
        <h5>电视剧</h5>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center p-3">
        <i class="bi bi-music-note-beamed fs-1 mb-2"></i>
        <h5>音乐</h5>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center p-3">
        <i class="bi bi-controller fs-1 mb-2"></i>
        <h5>游戏</h5>
      </div>
    </div>
  </div>
</div>
<!-- /SECTION: 热门分类 -->

<!-- SECTION: 热门榜单 -->
<div class="container my-5">
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="fw-bold">热门榜单</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-4">
        <div class="card-header bg-light">
          <h5 class="mb-0">今日热门</h5>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">1. 热门视频1</li>
          <li class="list-group-item">2. 热门视频2</li>
          <li class="list-group-item">3. 热门视频3</li>
          <li class="list-group-item">4. 热门视频4</li>
          <li class="list-group-item">5. 热门视频5</li>
        </ul>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header bg-light">
          <h5 class="mb-0">本周热门</h5>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">1. 本周热门1</li>
          <li class="list-group-item">2. 本周热门2</li>
          <li class="list-group-item">3. 本周热门3</li>
          <li class="list-group-item">4. 本周热门4</li>
          <li class="list-group-item">5. 本周热门5</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- /SECTION: 热门榜单 -->

<!-- SECTION: 页脚 -->
<footer class="bg-dark text-white py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-4 mb-md-0">
        <h5>关于我们</h5>
        <p>提供海量高清视频资源，打造最佳观影体验。</p>
      </div>
      <div class="col-md-4 mb-4 mb-md-0">
        <h5>快速链接</h5>
        <ul class="list-unstyled">
          <li><a href="#" class="text-white">首页</a></li>
          <li><a href="#" class="text-white">分类</a></li>
          <li><a href="#" class="text-white">排行榜</a></li>
          <li><a href="#" class="text-white">帮助中心</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <h5>联系我们</h5>
        <ul class="list-unstyled">
          <li>邮箱: contact@example.com</li>
          <li>电话: 123-456-7890</li>
        </ul>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-12 text-center">
        <p class="mb-0">© 2023 视频网站 版权所有</p>
      </div>
    </div>
  </div>
</footer>
<!-- /SECTION: 页脚 -->
<!-- 必要的JavaScript库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js">
  // 组件函数: 顶部导航栏
  document.addEventListener('DOMContentLoaded', function() {
    // 导航链接动画
    const navLinks = document.querySelectorAll('.section-dingbudaohanglan .nav-link');
    navLinks.forEach(link => {
      link.addEventListener('mouseenter', () => {
        link.style.transform = 'translateY(-2px)';
      });
      link.addEventListener('mouseleave', () => {
        link.style.transform = 'translateY(0)';
      });
    });

    // 搜索框聚焦效果
    const searchInput = document.querySelector('.section-dingbudaohanglan .search-form input');
    searchInput.addEventListener('focus', () => {
      searchInput.parentElement.style.boxShadow = '0 0 0 3px rgba(52, 152, 219, 0.3)';
    });
    searchInput.addEventListener('blur', () => {
      searchInput.parentElement.style.boxShadow = 'none';
    });

    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const navbar = document.querySelector('.section-dingbudaohanglan');
      if (window.scrollY > 50) {
        navbar.style.padding = '0.25rem 1rem';
        navbar.style.boxShadow = '0 2px 15px rgba(0, 0, 0, 0.2)';
      } else {
        navbar.style.padding = '0.5rem 1rem';
        navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
      }
    });

    // 移动设备菜单关闭点击
    const navItems = document.querySelectorAll('.section-dingbudaohanglan .nav-item');
    const navbarCollapse = document.querySelector('.section-dingbudaohanglan .navbar-collapse');
    navItems.forEach(item => {
      item.addEventListener('click', () => {
        if (window.innerWidth < 992) {
          const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
            toggle: false
          });
          bsCollapse.hide();
        }
      });
    });
  });

</script>
<!-- Fallback CDN -->
<script src="https://unpkg.com/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- Fallback CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
  // 页面加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    // 组件初始化: 顶部导航栏
    // 导航链接动画
    const navLinks = document.querySelectorAll('.section-dingbudaohanglan .nav-link');
    navLinks.forEach(link => {
      link.addEventListener('mouseenter', () => {
        link.style.transform = 'translateY(-2px)';

        console.log('页面已加载完成');
        // 初始化代码将在这里添加
      });
</script>
</body>
</html>
